<template>
  <div>
    <JInput v-model="model" :disabled="disabled"  @focus.stop="open" :clearable="clearable" @clear="clear"  />
    <tiny-dialog-box v-model:visible="show" width="550px">
      <div  >
        <div style="display: flex;flex-flow: wrap;">
          <div :class="['item', ids.indexOf(item.id) !== -1 ?'active':'']"
               v-for="(item, index) in list" :key="index"
               @click.stop="select(item)"
          >
            {{item.name}}
          </div>
        </div>
      </div>
      <div style="padding: 20px 0;margin-top: 50px;text-align: center;">
        <JButton size="medium" @click="confirm" type="info">确定</JButton >
      </div>
    </tiny-dialog-box>
  </div>
</template>
<script setup>
import {ref} from "vue";
import tool from "@/utils/tool";
import {TinyDialogBox} from "@opentiny/vue";
const props = defineProps({
  width: {type: [String, Number], default: 150},
  height: { type: [Number, String], default: '' },
  disabled: { type: Boolean, default: false  },
  inject: { type: Boolean, default: true  },
  clearable: { type: Boolean, default: true  },
})
const emit = defineEmits(['change'])
const show = ref(false)
const list = ref([])

const texts = ref([])
const ids = ref([])

const model = defineModel()
const id = defineModel('id')

const open = () => {
  if(!props.disabled) {
    tool.post('common/dropdown', {cat: 'deliverList'}).then(ret => {
      list.value = ret.data
      show.value = true
      if(typeof model.value !== 'undefined') {
        texts.value = []
        ids.value = []
        if(model.value) {
          let str = model.value.split(',')
          list.value.map(row => {
            if(str.indexOf(row.name) !== -1) {
              texts.value.push(row.name)
              ids.value.push(row.id)
            }
          })
        }
      }
    })
  }
}
const select = (item) => {
  if(ids.value.indexOf(item.id) === -1) {
    ids.value.push(item.id)
  }
  else {
    ids.value.splice(ids.value.indexOf(item.id), 1)
  }
  if(texts.value.indexOf(item.name) === -1) {
    texts.value.push(item.name)
  }
  else {
    texts.value.splice(texts.value.indexOf(item.name), 1)
  }
}
const confirm = () => {
  if(ids.value.length > 0) {
    id.value = ids.value.join(',')
  }
  if(texts.value.length > 0) {
    model.value = texts.value.join(',')
  }
  if(props.inject) {
    emit('change',fApi.value, {id: id.value, name: model.value})
  }
  else {
    emit('change',{id: id.value, name: model.value})
  }
  show.value = false
}
const clear = () => {
  id.value = ''
  model.value = ''
}
const fApi = ref({})
const setApi = (api) => {
  fApi.value = api
}
const focus = () => {}

defineExpose({focus, setApi})

</script>

<style lang="scss" scoped>
.item {
  border: 1px solid #2b85e4;
  border-radius: 4px;
  width: 120px;
  height: 35px;
  line-height: 35px;
  margin: 5px;
  user-select: none;
  padding: 0 5px;
  &:hover {
    cursor: pointer;
  }
  &.active {
    background-color: #2b85e4;
    color: white;
  }
}
</style>